<template>
  <div>
    <Row style="margin-top:20px">
      <Card>
        <Table :loading="tabelLoading" :columns="tableHead" :data="tableData" border height="600"></Table>
      </Card>
    </Row>

    <Modal v-model="isShowModal" title="查看" @on-cancel="cancelModal" width="650">
      <Table
        :loading="tabelLoading"
        :columns="modlTableHead"
        :data="modalTableData"
        border
        height="500"
      ></Table>
      <div slot="footer">
        <Button size="large" @click="cancelModal">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
// import { hasOneOf } from "@/libs/tools";
import { countrySubmitAjax } from "@/api/countyTown";
// 查询URL
const QUERY_URL = "/indexReport/getReport";

export default {
  data() {
    return {
      serarchData: {
        indexClass: "2" // 县对乡报送id
      },
      // 表头数据
      tableHead: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "二级指标",
          key: "indexName",
          width: 300,
          fixed: "left",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "default"
                  },
                  style: {
                    width: "auto"
                  },
                  on: {
                    click: () => {
                      this.formData = JSON.parse(JSON.stringify(params.row));
                      this.modalTableData = this.formData.reportList;
                      this.isShowModal = true;
                    }
                  }
                },
                params.row.indexName
              )
            ]);
          }
        },
        {
          title: "1月",
          key: "month01",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month01 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "2月",
          key: "month02",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month02 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "3月",
          key: "month03",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month03 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "4月",
          key: "month04",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month04 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "5月",
          key: "month05",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month05 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "6月",
          key: "month06",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month06 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "7月",
          key: "month07",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month07 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "8月",
          key: "month08",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month08 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "9月",
          key: "month09",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month09 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "10月",
          key: "month10",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month10 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "11月",
          key: "month11",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month11 === undefined ? "" : "已填报")
            ]);
          }
        },
        {
          title: "12月",
          key: "month12",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("p", params.row.month12 === undefined ? "" : "已填报")
            ]);
          }
        }
      ],
      // 表格数据
      tableData: [], // 表格数据
      tabelLoading: true, // 表格loading
      isShowModal: false,
      // 弹窗form 表单
      formData: {},
      // 模态框表格
      modlTableHead: [
        {
          title: "指标月份",
          key: "indexDate"
        },
        {
          title: "填报时间",
          key: "dateTime"
        },
        {
          title: "填报人",
          key: "userName"
        }
      ],
      modalTableData: []
    };
  },
  methods: {
    cancelModal() {
      this.isShowModal = false;
    },
    // 查询
    _getData(formData, url) {
      const keyOne = "townIndicatorsFilter";
      countrySubmitAjax({ formData, url, keyOne })
        .then(result => {
          console.log(result);
          this.tabelLoading = true;
          if (result.data.code === "200") {
            this.tabelLoading = false;
            let item = result.data.results;
            this.tableData = item.list;

            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getData(this.serarchData, QUERY_URL);
  }
};
</script>
<style scoped>
</style>
